<template>
  <div style="padding:0px">
    <el-autocomplete
      v-model="state"
      :size="size"
      :debounce="200"
      :disabled="disabled"
      :fetch-suggestions="querySearch"
      :placeholder="'请输入' + placeholder"
      class="width-auto"
      clearable
      @select="handleSelect"
    />
  </div>
</template>

<script>
import api from '@/api/service'

export default {
  model: {
    prop: 'id',
    event: 'return'
  },
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    bean: {
      type: String,
      default: 'user'
    },
    field: {
      type: String,
      default: 'name'
    },
    size: {
      type: String,
      default: 'small'
    },
    params: {
      type: Object,
      default: () => {}
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 100
    },
    pageSize: {
      type: Number,
      default: 10
    },
    placeholder: {
      type: String,
      default: '关键词'
    }
  },
  data() {
    return {
      state: '',
      datas: [],
      preQry: null,
      loading: false,
      preParams: {},
      oldId: ''
    }
  },
  watch: {
    id: {
      handler(newValue, oldValue) {
        // console.log('input.watch.id', 'newValue=' + newValue + ',oldValue=' + oldValue + ',oldId=' + this.oldId, newValue === oldValue, newValue === this.oldId)
        if (newValue !== this.oldId) {
          if (!newValue) {
            this.state = ''
          }
          this.getListData(this.id, null, null)
        }
      },
      deep: true,
      immediate: true
    },
    params: {
      handler(newValue, oldValue) {
        // console.log('newValue', newValue)
        // console.log('oldValue', oldValue)
        // console.log(util.looseEqual(newValue, oldValue))
        var isEqual = true
        if (newValue) {
          for (const prop in newValue) {
            // console.log('newValue[prop]', newValue[prop])
            // console.log('oldValue[prop]', oldValue[prop])
            // console.log('equal', newValue[prop] === oldValue[prop])
            if (oldValue[prop] && newValue[prop] !== oldValue[prop]) {
              console.log('newValue[prop]', newValue[prop])
              console.log('oldValue[prop]', oldValue[prop])
              console.log('equal', newValue[prop] === oldValue[prop])
              isEqual = false
              break
            }
          }
        }
        if (!isEqual) {
          console.log('newValue', newValue)
          console.log('oldValue', oldValue)
          this.getListData(null, this.params, null)
        }
      },
      deep: true
    }
  },
  mounted() {
    // console.log('input.mounted.id', this.id)
    if (this.id) {
      this.getListData(this.id, null, null)
    }
    this.preParams = this.params
  },
  methods: {
    querySearch(query, cb) {
      if (query === this.preQry) {
        cb(this.datas)
      } else if (!this.loading) {
        if (query === '') this.$emit('return', '')
        this.getListData(null, query, cb)
      }
    },
    getListData(id = null, query = null, cb = null) {
      this.preQry = query
      this.loading = true
      const args = { pageSize: this.pageSize, params: this.params ? JSON.parse(JSON.stringify(this.params)) : {}}
      if (id) args.params.id = id
      if (query) {
        if (this.bean === 'user') {
          args.params.nickOrPhone = query
        } else {
          args.params[this.field + '$Lk'] = query
        }
      }
      api.getListPage(this.bean, args).then(res => {
        this.loading = false
        this.datas = []
        for (const item of res.data) {
          this.datas.push({
            id: item.id,
            value: this.bean === 'user' ? item['nickName'] + ' - ' + item['phone'] : item[this.field]
          })
        }
        if (this.datas && this.datas.length === 1 && id) {
          this.state = this.datas[0].value
        }
        // 调用 callback 返回建议列表的数据
        if (cb) cb(this.datas)
      })
    },
    handleSelect(item) {
      // console.log('item', JSON.stringify(item))
      this.oldId = item.id
      this.$emit('return', item.id)
    }
  }
}
</script>
